<template>
    <div style="text-align: center; margin-top: 50px;">
        <UploadExcel :on-success="success" />
        <el-button size="mini" type="success" @click="exportFn">导出</el-button>
    </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel.vue';
export default {
    name: 'App',
    data() {
        return {
            data: {}
        };
    },
    components: {
        UploadExcel
    },
    methods: {
        success(data) {
            console.log(data);
            this.data = this.formatData(data);
        },
        formatData(originData) {
            const header = originData.header;
            const data = originData.results.map((item) => {
                const arr = [];
                header.forEach((key) => {
                    arr.push(item[key]);
                });
                return arr;
            });
            return { header, data };
        },
        exportFn() {
            try {
                import('@/vendor/Export2Excel').then((excel) => {
                    const { header, data } = this.data;
                    excel.export_json_to_excel({
                        header,
                        data,
                        filename: `报表${new Date().getTime()}.xls`
                    });
                    this.$message.success('导出报表成功！');
                });
            } catch (error) {
                this.$message.error(error);
            }
        }
    }
};
</script>
